<!DOCTYPE html>
<html class="h-100">

<head>
    <!-- Required meta tags -->
    <!-- Enable responsive viewport -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>YAPW | Yet Another Personal Website</title>
    <meta name="description" content="A website you've never seen before.">
    <meta name="author" content="夏龙飞">

    <!-- Bootstrap styles -->
    <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> -->
    <!-- 换用国内CDN -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles -->
    <link href="/css/main.css" rel="stylesheet">
    <link href="/css/code.css" rel="stylesheet">
    <style>
        .mx-auto img {
            border-radius: 21px 21px 0 0;
            box-shadow: 0 0 50px rgb(0 0 0 / 50%);
        }

        .lead a {}
    </style>

    <!-- 网站图标或 logo -->
    <link rel="shortcut icon" href="/images/favicon.ico">
    <link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/images/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/images/apple-touch-icon-114x114.png">

    <!-- Font Awesome 图标库 -->
    <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> -->
    <!-- 换用国内CDN -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.css">

    <!-- 网站数据统计脚本 -->
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-KH5F33460C"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'G-KH5F33460C');
    </script>
    <!-- 网站数据统计脚本 -->
</head>

<body class="">

    <!-- 导航栏 -->
    <header class="site-header sticky-top py-1">
        <nav class="container d-flex flex-column flex-md-row justify-content-between">
            <a class="py-2" href="/home" aria-label="Product">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
                    stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mx-auto" role="img"
                    viewBox="0 0 24 24">
                    <title>Product</title>
                    <circle cx="12" cy="12" r="10" />
                    <path
                        d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94" />
                </svg>
            </a>
            <a class="py-2 d-none d-md-inline-block" href="#place-recorder">打个卡呗</a>
            <a class="py-2 d-none d-md-inline-block" href="#xialiaozhushou">下料助手</a>
            <a class="py-2 d-none d-md-inline-block" href="#minixiaoyenan">迷你小夜喃</a>
            <a class="py-2 d-none d-md-inline-block" href="#bookmark">网站收藏夹</a>
            <a class="py-2 d-none d-md-inline-block" href="#cv">简历</a>
        </nav>
    </header>

    <!-- 主容器 -->
    <main>

        <div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
            <div class="col-md-5 p-lg-5 mx-auto my-5">
                <h1 class="display-4 fw-normal">夏龙飞</h1>
                <p class="lead fw-normal">北京交通大学计算机与信息技术学院硕士。</p>
                <a class="btn btn-outline-secondary" href="/about">关于我</a>
            </div>
            <div class="product-device shadow-sm d-none d-md-block"></div>
            <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
        </div>

        <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
            <div id="place-recorder"
                class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
                <div class="my-3 p-3">
                    <h2 class="display-5">“打个卡呗”</h2>
                    <p class="lead">一款基于位置服务打卡的微信小程序。</p>
                    <p class="lead"><a class="text-white" href="/place-recorder">看看是个啥 ></a></p>
                </div>
                <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;">
                    <img src="images/place-recorder.png" alt="place-recorder.png">
                </div>
            </div>

            <div id="xialiaozhushou" class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
                <div class="my-3 py-3">
                    <h2 class="display-5">“下料助手”</h2>
                    <p class="lead">一款专供铝合金窗户加工师傅下料时使用的型材尺寸计算器，简单方便实用。</p>
                    <img src="images/xialiaozhushou-qrcode.png" alt="xialiaozhushou-qrcode.png"
                        style="max-width: 80%; box-shadow: 0 0 50px rgb(0 0 0 / 50%); border-radius: 21px;">
                </div>
                <div class="bg-light shadow-sm mx-auto"
                    style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"><img
                        src="images/xialiaozhushou.png" alt="xialiaozhushou.png"></div>
            </div>

            <div id="minixiaoyenan"
                class="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
                <div class="my-3 py-3">
                    <h2 class="display-5">“迷你小夜喃”</h2>
                    <p class="lead">一款迷你世界礼包激活码领取工具。</p>
                    <img src="images/minixiaoyenan-qrcode.png" alt="minixiaoyenan-qrcode.png"
                        style="max-width: 80%; box-shadow: 0 0 50px rgb(0 0 0 / 50%); border-radius: 21px;">
                </div>
                <div class="bg-light shadow-sm mx-auto"
                    style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"><img src="images/minixiaoyenan.jpg" alt="minixiaoyenan.jpg"></div>
            </div>


        </div>

        <div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
            <div id="bookmark" class="bg-light me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
                <div class="my-3 py-3">
                    <h2 class="display-5">网站收藏夹</h2>
                    <p class="lead">这里收藏了我最喜欢的一些网站。</p>
                    <p class="lead"><a class="text-dark" href="/bookmark">看看是个啥 ></a></p>
                </div>
                <div class="bg-light shadow-sm mx-auto"
                    style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"><img
                        src="images/bookmark.png" alt="bookmark.png"></div>
            </div>

            <div id="cv" class="bg-primary me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
                <div class="my-3 p-3">
                    <h2 class="display-5">简历</h2>
                    <p class="lead">期待与您成为同事^_^</p>
                    <p class="lead"><a class="text-white" href="assets/downloads/cv-0906.pdf">下载瞅一眼 ></a></p>
                </div>
                <div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"><img src="images/cv-0906.jpg" alt="cv-0906.jpg"></div>
            </div>
        </div>

    </main>

    <!-- 页脚 -->
    <div class="footer mt-auto">
        <div class="container">
            <p>
                <!-- Map Widget provided by ClustrMaps.com -->
                <script type='text/javascript' id='clustrmaps'
                    src='//cdn.clustrmaps.com/map_v2.js?cl=ffffff&w=300&t=tt&d=IwC9fpnRbvTHZdspX1HWXkCwHCWI90zG4UCVL4SQ1X4'></script>
            </p>
            <p>&copy; 2021 夏龙飞 with help from <a href="http://getbootstrap.com" target="_blank">Bootstrap</a> and <a
                    href="https://pages.github.com/" target="_blank" title="Websites for you and your projects.">Github
                    Pages</a></p>
            <!-- <p><a href="http://www.beian.miit.gov.cn/" target="_blank" class="text">苏ICP备19021018号<br/></a></p> -->
        </div>
    </div>



    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> -->
    <!-- 换用国内CDN -->
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <!-- <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> -->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.0/js/bootstrap.min.js"></script>
</body>

</html>